<template>
	<view class="bg-light pb-2" style="height: 100%">
		<!-- 轮播主图 -->
		<scroll-view scroll-y="true">
			<view style="position: relative" class="mb-3">
				<swiper id="swiper" :autoplay="true" :interval="3000" :duration="500" circular
					:style="{ height: swiperWidth + 'px' }" @change="changeIndicatorDots">
					<swiper-item v-if="item.isShow" v-for="(item, index) in GoodsDetail.Swiper" :key="index">
						<image :src="Domain_IMG + item.Picture_Url" mode="sapectFill"
							:style="{ height: swiperWidth + 'px', width: '100%' }" :lazy-load="true"></image>
					</swiper-item>
				</swiper>
				<text class="rounded-circle font-sm px-2 text-white current">{{
          current
        }}</text>
			</view>
		</scroll-view>

		<!-- 商品详情 -->
		<view class="pt-2 pb-1 title m-auto rounded-lg flex flex-column mt-4">
			<text class="txt ml-3 h3">{{ GoodsDetail.Article_Name }}</text>
			<text class="txt ml-3 font text-ellipsis">{{
        GoodsDetail.Category_Name
      }}</text>
			<text class="txt ml-3 mt-2 font-sm text-ellipsis text-info">已售:{{ GoodsDetail.Stock_Sell }} 仅剩:{{
          specifications[select].Stock_Remain
        }}</text>
			<text class="price font-lg text-ellipsis">￥{{ Price(specifications[select].Sales_Unit_Price) }}</text>
		</view>
		<!-- 商品规格 -->
		<view class="mx-4 mt-1 px-2 py-2 bg-white rounded" style="position: relative">
			<text class="font font-weight-bold">产品规格</text>
			<view class="flex flex-wrap">
				<view class="flex" @click="selectspecifications(i)" v-for="(item, i) in specifications" :key="i">
					<view style="white-space: nowrap" v-show="item.Sales_Unit_Price"
						:style="select === i ? 'background-color: #aaffff;color:#000' : ''"
						class="specifications2 rounded font-sm mr-2 mt-2 py-1 px-2">{{ item.Specifications_Name }}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="mt-2 pt-2 pb-4 m-auto detai rounded-lg">
			<text class="h3 font-weight-bold ml-3">商品详情</text>
			<view id="DetailMap" class="flex flex-wrap justify-center m-auto mb-10" style="width: 90%">
				<scroll-view scroll-y="true">
					<view v-for="(item, index) in GoodsDetail.Detail" :key="index">
						<image v-if="item.isShow" style="width: 100%" :src="Domain_IMG + item.Picture_Url"
							mode="widthFix" :lazy-load="true"></image>
					</view>
				</scroll-view>
			</view>
			<!-- <view class="flex justify-center flex-column align-center mb-10">
				<uni-icons v-show="shows" @click="showstory()" type="bottom"></uni-icons>
				<text v-show="hide" class="font-weight-bold font-sm">价格说明</text>
				<view v-show="hide" class="p-3 font-sm">
					<view class="flex flex-column" style="color: #999999;">
						<text class="font-small">1、平台价: 平台价为商品的销售价，是您最终决定是否购买商品的依据。</text>
						<text
							class="font-small">2、划线价:商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)
							或其他真实有依据的价格;由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参老。</text>
						<text class="font-small">3、折扣:如无特殊说明，折扣指销售商在原价、或划线价 (如品牌专柜标价、商品吊牌价、厂商指导价、厂商建议零售价)
							等某价格基础上计算出的优惠比例或优惠金额;如有疑问，您可在购买前联系销售商进行咨询。</text>
						<text
							class="font-small">4、异常问题:商品促销信息以商品详情页“促销”栏中的信息为准:商品的具体售价以订单结算页价格为准，如您发现活动售价或促销信息有异常，建议购买前先联系销售商咨询</text>
					</view>
				</view>
				<uni-icons v-show="!shows" @click="showstory()" type="top"></uni-icons>
			</view> -->
		</view>
		<!-- 底部按钮 -->
		<view class="fixed-bottom py-1" style="background-color: #fff">
			<view class="m-auto flex align-center justify-between" style="width: 90%">
				<view @click="handleBtn('index')" class="flex flex-column justify-center align-center">
					<image :src="Domain_ICON + '/index.png'" style="width: 35rpx; height: 35rpx" mode=""></image>
					<text class="font-sm text-muted">首页</text>
				</view>
				<view @click="handleBtn('serve')" class="flex flex-column justify-center align-center">
					<image :src="Domain_ICON + '/serve.png'" style="width: 35rpx; height: 35rpx" mode=""></image>
					<text class="font-sm text-muted">客服</text>
				</view>
				<view @touchmove.stop.prevent="moveHandle" @click="handleBuy('car')"
					class="text-white bg-info py-3 text-center rounded-lg" style="width: 35%">
					<text class="font">加入购物车</text>
				</view>
				<view @touchmove.stop.prevent="moveHandle" @click="handleBuy('buy')"
					class="text-white bg-info py-3 text-center rounded-lg" style="width: 35%">
					<text class="font">立即购买</text>
				</view>
			</view>
		</view>
		<!-- 右侧悬浮按钮 -->
		<view class="button flex flex-column-reverse">
			<view class="shadow mt-2 bg-white rounded-circle flex justify-center align-center"
				style="width: 100rpx; height: 100rpx; position: relative" @click="handleBtn(item.title)"
				v-if="item.isShow" v-for="(item, index) in btn" :key="index">
				<i v-if="item.title == 'car' && total > 0" class="bg-danger rounded-circle text-white px-1 font-sm"
					style="position: absolute; top: -5rpx; left: -5rpx">{{ total }}</i>
				<image :src="Domain_ICON + item.icon" style="width: 50rpx; height: 50rpx" mode=""></image>
				<button id="shareBtn" class="rounded-circle" open-type="share" v-if="item.title == 'share'">
					分享
				</button>
			</view>
		</view>
		<!-- 遮罩层和弹窗 -->
		<view v-if="showMask" class="mask" style="background-color: rgba(0, 0, 0, 0.5)">
			<view class="fixed-bottom bg-light rounded-lg" style="height: 75%">
				<view style="position: relative; height: 120rpx">
					<image :src="Domain_IMG + GoodsDetail.Picture_URL"
						class="rounded-lg front-cover border border-white" style="border-width: 5rpx" mode=""></image>
					<text class="font-md font-weight-bold"
						style="position: absolute; left: 240rpx; top: 80rpx">￥{{ Price(Sales_Amount()) }}</text>
					<text @click="handleBuy()" class="h2 text-info"
						style="position: absolute; right: 40rpx; top: 20rpx">×</text>
				</view>
				<!-- 地址选择 -->
				<view v-if="Address == null" @click="onAddress()"
					class="mx-4 mt-4 px-2 py-3 bg-white rounded flex align-center" style="position: relative">
					<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info"
						style="width: 30rpx; height: 30rpx" mode=""></image>
					<text class="font-sm ml-2">新建地址</text>
					<text class="font" style="position: absolute; right: 20rpx">&gt;</text>
				</view>
				<view v-else @click="onAddress()" class="mx-4 mt-4 px-2 py-3 bg-white rounded flex"
					style="position: relative">
					<image :src="Domain_ICON + '/position.png'" class="rounded-circle bg-info flex-shrink"
						style="width: 30rpx; height: 30rpx" mode=""></image>
					<text class="font-sm ml-2 pr-2">{{ Address.Address }}</text>
					<text class="font" style="position: absolute; right: 20rpx">&gt;</text>
				</view>
				<!-- 产品规格 -->
				<view class="mx-4 mt-1 px-2 py-2 bg-white rounded" style="position: relative">
					<text class="font font-weight-bold">产品规格</text>
					<view class="flex flex-wrap">
						<view class="flex" @click="selectspecifications(i)" v-for="(item, i) in specifications"
							:key="i">
							<view style="white-space: nowrap" :style="
                  select === i ? 'background-color: #aaffff;color:#000;' : ''
                " class="specifications2 rounded font-sm mr-2 mt-2 py-1 px-2">{{ item.Specifications_Name }}
							</view>
						</view>
					</view>
				</view>
				<view class="mx-4 mt-4 px-2 py-3 bg-white rounded" style="position: relative">
					<text class="font font-weight-bold">数量</text>
					<view class="flex" style="float: right">
						<view @click="subGoods()" hover-class="bg-hover-light" :hover-stay-time="150"
							class="mx-1 text-center rounded-left bg-light" style="width: 50rpx">-</view>
						<view class="font-sm flex align-center justify-center bg-light" style="width: 60rpx">
							{{ quantity }}
						</view>
						<view @click="addGoods()" hover-class="bg-hover-light" :hover-stay-time="150"
							class="mx-1 text-center rounded-right bg-light" style="width: 50rpx">+</view>
					</view>
				</view>
				<view v-if="mask == 'buy'" @click="handleSkip()"
					class="fixed-bottom rounded font bg-info mx-4 my-2 py-2 text-white text-center">立即购买</view>
				<view v-if="mask == 'car'" @click="addShopCar()"
					class="fixed-bottom rounded font bg-info mx-4 my-2 py-2 text-white text-center">加入购物车</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		WXAddAction,getAddAction
	} from "@/api/global.js";
	import {
		WXShopCarQuantity
	} from "@/api/WeChat.js";
	import {
		NowTime
	} from "@/static/js/DateUtil.js";
	import {
		accMul
	} from "@/static/js/GeneralUtil.js";
	export default {
		data() {
			return {
				ShareOpenID: "",
				OpenID: "",
				Enterprise_Info_SerialNumber: "",
				App_ID: "",
				Domain_IMG: app.globalData.Domain_IMG, //全局变量--域名
				Domain_ICON: app.globalData.Domain_ICON, //全局变量域名
				Article_SerialNumber: "", //商品主键
				Sales_Unit_Price_SerialNumber: "", //库存主键
				Store_SerialNumber: "", //门店主键
				swiperWidth: 0, //自适应轮播组件长度
				current: "", //轮播图数
				showMask: false, //弹窗
				mask: "buy", //判断?购物车 or 购买
				quantity: 1, //数量
				GoodsDetail: {
					Stock_Sell: "",
				}, //商品详情
				hide: false, //控制商品说明是否展示
				shows: true,
				select: 0,
				total: 0,
				// times: '',
				loading: false,
				specifications: [{
					Sales_Unit_Price: "",
					Sales_Unit_Price_Stock_SerialNumber: "",
					Specifications_Name: "",
					Stock_Remain: "",
					Stock_Sell: "",
				}, ],
				Goods: [],
				Address: null, //默认地址
				btn: [{
						//右侧悬浮按钮
						title: "top",
						icon: "/top.png",
						isShow: false,
					},
					{
						title: "serve",
						icon: "/serve.png",
						isShow: true,
					},
					{
						title: "car",
						icon: "/shop_car.png",
						isShow: true,
					},
					{
						title: "share",
						icon: "/share.png",
						isShow: true,
					},
				],
			};
		},
		onShow() {
			if (uni.getStorageSync("AddressData")) {
				//本地存储地址
				this.Address = uni.getStorageSync("AddressData");
			}
			this.ShopCarQuantity(app.globalData.openid);
		},
		onLoad(options) {
			// uni.setStorageSync("ShareUrl",`/pages/index/details?Article_SerialNumber=${options.Article_SerialNumber}&Sales_Unit_Price_SerialNumber=${options.Sales_Unit_Price_SerialNumber}&Store_SerialNumber=${options.Store_SerialNumber}&ShareOpenid=${ uni.getStorageSync("openid")}`);
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].$page.fullPath
			console.log(curRoute);
			if (options.ShareOpenid&&options.Member_Share_SerialNumber) {
				this.ShareOpenID = options.ShareOpenid;
				this.OpenID = uni.getStorageSync("openid");
				this.Enterprise_Info_SerialNumber = uni.getStorageSync(
					"Enterprise_Info_SerialNumber"
				);
				this.App_ID = uni.getStorageSync("App_ID");
				app.globalData.Member_Share_SerialNumber = options.Member_Share_SerialNumber
				//不可以自己分享给自己
				if (this.ShareOpenID != this.OpenID) {
					app.globalData.Member_Share_SerialNumber = options.Member_Share_SerialNumber
					console.log(app.globalData.Member_Share_SerialNumber);
					// await getAddAction({
					// 	Data:JSON.stringify({
					// 		member_share_detail:[{
					// 			Member_Share_Detail_SerialNumber:'',
					// 			Member_Share_SerialNumber:options.Member_Share_SerialNumber,
					// 			Open_ID,
					// 			Enter_Date:NowTime(),
					// 			Sales_Order_SerialNumber:'',
					// 		}]
					// 	})
					// })
					uni.request({
						//获取点击的分享者传给服务器
						url: app.globalData.Domain_Name + "/WXMemberBehaviorAddAction",
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						method: "POST",
						data: {
							Parent_Open_ID: this.ShareOpenID,
							Open_ID: this.OpenID,
							Enterprise_Info_SerialNumber: this.Enterprise_Info_SerialNumber,
							App_ID: this.App_ID,
							Meet_Type: "商品页分享",
						},
						success: (res) => {},
					});
				}
			}
			this.fixed();
			uni.showLoading({
				title: "加载中...",
			});
			this.Article_SerialNumber = options.Article_SerialNumber;
			this.Sales_Unit_Price_SerialNumber = options.Sales_Unit_Price_SerialNumber;
			this.Store_SerialNumber = options.Store_SerialNumber;
			uni.request({
				//商品详情信息
				header: {
					"Content-Type": "application/x-www-form-urlencoded",
				},
				url: app.globalData.Domain_Name + "/WX2GoodsDetailIdAction", //销售价格单
				method: "POST",
				data: {
					Article_SerialNumber: options.Article_SerialNumber,
					Sales_Unit_Price_SerialNumber: options.Sales_Unit_Price_SerialNumber,
				},
				success: (res) => {
					this.GoodsDetail = res.data;
					res.data.Swiper.forEach((item, i) => {
						this.CheckImg(item, i);
					});
					res.data.Detail.forEach((item, i) => {
						this.CheckImg1(item, i);
					});
					this.specifications = res.data.specifications;
					this.carouselChart(); //轮播图属性函数
				},
				complete() {
					uni.hideLoading();
				},
			});
			this.getRoutes(
				options.Article_SerialNumber,
				options.Sales_Unit_Price_SerialNumber,
				options.Store_SerialNumber,
				options.Sales_Unit_Price
			);
		},
		onPageScroll(e) {
			//监听页面滚动，滚动1000以上时显示"回到顶部"按钮
			if (e.scrollTop >= 1000) {
				this.btn[0].isShow = true;
			} else {
				this.btn[0].isShow = false;
			}
		},
		computed: {
			Price() {
				//补零
				return function(price) {
					if (price) {
						if (RegExp(/\./).exec(price)) {
							return price;
						} else {
							return price + ".00";
						}
					} else {
						return "";
					}
				};
			},
			Sales_Amount() {
				//总价
				return function() {
					return accMul(
						this.specifications[this.select].Sales_Unit_Price,
						this.quantity
					);
				};
			},
		},
		methods: {
			async getRoutes(
				Article_SerialNumber,
				Sales_Unit_Price_SerialNumber,
				Store_SerialNumber,
				Sales_Unit_Price
			) {
				let pages = getCurrentPages();
				const res = await WXAddAction({
					Data: JSON.stringify({
						member_browsing_info: [{
							Browse_SerialNumber: "",
							Browse_Path: pages[pages.length - 1].$page.fullPath,
							Article_SerialNumber,
							Sales_Unit_Price_SerialNumber,
							Store_SerialNumber,
							Browse_Date: NowTime(),
							Amount: Sales_Unit_Price,
							Open_ID: app.globalData.openid,
							App_ID: app.globalData.appid,
							User_Type: "0",
							Enterprise_Info_SerialNumber: app.globalData.enterprise,
						}, ],
					}),
					Open_ID: app.globalData.openid,
				});
				if (res.Status == "success") {
					console.log("浏览记录以保存");
				}
			},
			async ShopCarQuantity(openid) {
				const res = await WXShopCarQuantity({
					App_ID: app.globalData.appid,
					Open_ID: openid,
					Enterprise_Info_SerialNumber: app.globalData.enterprise,
				});
				if (res.Status == "success") {
					this.total = parseInt(res.total);
				}
			},
			CheckImg(data, i) {
				uni.getImageInfo({
					src: app.globalData.Domain_IMG + data.Picture_Url,
					success: (res) => {
						// 图片加载成功
						// this.Goods.push(data)
						data.isShow = true;
						this.current =
							"1/" + this.GoodsDetail.Swiper.filter((item) => item.isShow).length; //初始化
					},
					fail: (error) => {
						data.isShow = false;
						// 图片加载失败
					},
				});
			},
			CheckImg1(data, i) {
				uni.getImageInfo({
					src: app.globalData.Domain_IMG + data.Picture_Url,
					success: (res) => {
						data.isShow = true;
					},
					fail: (error) => {
						data.isShow = false;
					},
				});
			},
			handleBtn(title) {
				//点击屏幕左侧悬浮按钮或底部"首页"、"客服"按钮后对应操作
				if (title == "top") {
					//回到页面顶部
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300,
					});
				} else if (title == "serve") {
					//进入"客服"页
					uni.navigateTo({
						url: "../serves/serves",
					});
				} else if (title == "car") {
					//进入"购物车"页
					uni.navigateTo({
						url: "../shopcar/shopcar",
					});
				} else if (title == "index") {
					//进入"首页"
					uni.navigateTo({
						url: "/pages/index/index",
					});
				}
			},
			fixed() {
				//底部模块高度获取
				uni
					.createSelectorQuery()
					.select("#DetailMap")
					.boundingClientRect((res) => {
						this.fixedHeight = res.height + this.rpxToPx(50);
					})
					.exec();
			},
			rpxToPx(rpx) {
				//rpx转px
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				return (screenWidth * Number.parseInt(rpx)) / 750;
			},
			subGoods() {
				//商品减少
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			addGoods() {
				//商品增加
				this.quantity++;
			},
			handleBuy(title) {
				//点击"立即购买"或"加入购物车"
				this.showMask = !this.showMask;
				if (title == "car") {
					this.mask = "car";
				} else {
					this.mask = "buy";
				}
			},
			moveHandle() {}, //打开遮罩层底层滚动取消
			handleSkip() {
				//跳转"提交订单页"
				let obj = {
					Article_SerialNumber: this.Article_SerialNumber,
					Sales_Unit_Price_Stock_SerialNumber: this.specifications[this.select]
						.Sales_Unit_Price_Stock_SerialNumber,
					Store_SerialNumber: this.Store_SerialNumber,
					Article_Name: this.GoodsDetail.Article_Name,
					Picture_URL: this.GoodsDetail.Picture_URL,
					Unit_Price: this.specifications[this.select].Unit_Price,
					quantity: this.quantity,
					Sign: this.specifications[this.select].Sign,
					Specifications_Name: this.specifications[this.select].Specifications_Name,
					Sales_Unit_Price: this.specifications[this.select].Sales_Unit_Price,
					Article_Specifications_SerialNumber: this.specifications[this.select]
						.Article_Specifications_SerialNumber,
				};
				uni.setStorageSync("Store_SerialNumber", this.Store_SerialNumber);
				uni.navigateTo({
					url: "/pages/index/submitOrderOld?SalesOrder=" +
						encodeURIComponent(JSON.stringify([obj])),
				});
			},
			addShopCar() {
				//加入购物车
				// this.time()
				if (!this.loading) {
					this.loading = true;
					uni.showLoading({
						title: "提交中...",
					});
					uni.request({
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
						},
						url: app.globalData.Domain_Name + "/WXCheckShopCarAction", //
						method: "POST",
						data: {
							Open_ID: app.globalData.openid,
							App_ID: app.globalData.appid,
							Sales_Unit_Price_Stock_SerialNumber: this.specifications[this.select]
								.Sales_Unit_Price_Stock_SerialNumber,
						},
						success: (res) => {
							if (res.data.length == 0) {
								uni.request({
									header: {
										"Content-Type": "application/x-www-form-urlencoded",
									},
									url: app.globalData.Domain_Name + "/WXAddAction", //
									method: "POST",
									data: {
										Data: JSON.stringify({
											sales_order: [{
												Sales_Order_SerialNumber: "",
												Store_SerialNumber: this
													.Store_SerialNumber,
												Sales_Date: NowTime(),
												Open_ID: app.globalData.openid,
												Sales_Amount: accMul(
													this.specifications[this
														.select].Sales_Unit_Price,
													this.quantity
												),
												Collection_Amount: 0,
												Sales_ID: "xiaoshou1",
												Receive_Type: 0,
												Refund_Type: 0,
												Row_Status: 8,
												App_ID: app.globalData.appid,
												Enterprise_Info_SerialNumber: app
													.globalData.enterprise,
												Children: {
													sales_order_detail: [{
														Sales_Order_Detail_SerialNumber: "",
														Sales_Order_SerialNumber: "",
														Sales_Unit_Price_Stock_SerialNumber: this
															.specifications[
																this.select]
															.Sales_Unit_Price_Stock_SerialNumber,
														Article_SerialNumber: this
															.Article_SerialNumber,
														Article_Specifications_SerialNumber: this
															.specifications[
																this.select]
															.Article_Specifications_SerialNumber,
														Sign: this
															.specifications[
																this.select]
															.Sign,
														Quantity: this
															.quantity,
														Unit_Price: this
															.specifications[
																this.select]
															.Unit_Price,
														Sales_Unit_Price: this
															.specifications[
																this.select]
															.Sales_Unit_Price,
														Amount: accMul(
															this
															.specifications[
																this.select
															]
															.Sales_Unit_Price,
															this.quantity
														),
														Receive_Type: 0,
														Refund_Type: 0,
														Row_Status: 8,
														Enterprise_Info_SerialNumber: app
															.globalData
															.enterprise,
													}, ],
												},
											}, ],
										}),
										Open_ID: app.globalData.openid,
									},
									success: (res) => {
										if (res.data.Status == "success") {
											uni.showToast({
												title: "已加入购物车！",
												icon: "none",
											});
											this.total++;
											this.ShopGoods();
										} else {
											uni.showToast({
												title: "系统繁忙！",
												icon: "error",
											});
										}
									},
									complete: () => {
										this.loading = false;
										uni.hideLoading();
									},
								});
							} else {
								this.loading = false;
								uni.hideLoading();
								uni.showToast({
									title: "购物车存在该商品！",
									icon: "none",
								});
							}
						},
					});
				}
			},
			changeIndicatorDots(e) {
				//每次轮播修改轮播图数--1/4
				this.current =
					e.detail.current + 1 + "/" + this.GoodsDetail.Swiper.length;
			},
			carouselChart() {
				//轮播图属性函数
				this.$nextTick(() => {
					//渲染完成后再执行
					uni
						.createSelectorQuery()
						.in(this)
						.select("#swiper")
						.boundingClientRect((data) => {
							this.swiperWidth = data.width;
						})
						.exec();
				});
			},
			onAddress() {
				//跳转到地址列表
				uni.navigateTo({
					url: "/pages/my/address?Path=/pages/index/details",
				});
			},
			selectspecifications(i) {
				this.select = i;
			},
			//控制商品说明
			showstory() {
				this.hide = !this.hide;
				this.shows = !this.shows;
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}

	#shareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.current {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		bottom: 150rpx;
		right: 25rpx;
		justify-content: space-around;
	}

	.title {
		position: relative;
		margin-top: -50rpx;
		width: 90%;
		background-color: #fff;

		.txt {
			display: block;
			width: 90%;
		}

		.price {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
		}
	}

	.detai {
		width: 90%;
		background-color: #fff;
	}

	.button {
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		width: 100rpx;
	}

	.front-cover {
		position: absolute;
		top: -50rpx;
		left: 40rpx;
		width: 170rpx;
		height: 170rpx;
	}

	.specifications {
		border: 1px solid #17a2b8;
		display: inline-block;
		background-color: #aaffff;
	}

	.specifications2 {
		color: #fff;
		display: inline-block;
		background-color: #aaaaaa;
	}
</style>